<template>
    <!-- <div class="MY-member"></div> -->
    <div class="MY_member">
        <div class="member-vip">
            <div class="topmenber">
                <div class="mycen">
                    <img src="/src/images/01.png" alt="">
                    <div class="tightge">
                        <h3>1503433_coDS</h3>
                        <p>您还不是会员</p>
                    </div>
                </div>
            </div>

            <div class="Open-membership">
                <p>开通会员平均每年可省：￥9500</p>
            </div>

            <!-- 开通会员  -->
            <div class="membership">
                <!-- 季度会员 -->
                <div class="quarterly">
                    <p>季度会员</p>
                    <span>￥<i class="bigSize">98</i>/季</span>
                    <p>合计98￥(青少年专属)</p>
                </div>
                <div class="quarterly">
                    <p>季度会员</p>
                    <span>￥<i class="bigSize">268</i>/季</span>
                    <p>合计268￥(青少年专属)</p>
                </div>
                <div class="quarterly">
                    <p>季度会员</p>
                    <span>￥<i class="bigSize">196</i>/季</span>
                    <p>合计196￥(青少年专属)</p>
                </div>
            </div>
            <!-- 立即开通会员 -->
            <div class="common_vip">
                <button class="btn">
                    <span>立即以588￥开通会员</span>
                </button>
            </div>

            <!-- 会员协议 -->
            <div class="Membership-Agreement">
                <p>开通即视为同意 <a href="/vip-agreement">《会员服务协议》</a></p>
            </div>

            <!-- 专属权益 -->
            <div class="Exclusive_rights">
                <div class="Equity">会员专属权益</div>
                <ul>
                    <el-popover height="160px" width="250px" placement="top"
                        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
                        <template #reference>
                            <li>
                                <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                                <span>723个会员专区课程免费学习</span>
                            </li>
                        </template>
                        <template #default>
                            <div class="demo-rich-conent" style="
								display: flex;
								gap: 16px;
								flex-direction: column;
							">
                                <img class="popoImg" src="https://rs.dance365.com/teach_video_free.png" alt="" />
                                <p>
                                    会员专区的723个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！
                                </p>
                                <button class="popobtn">立即前往会员专区</button>

                            </div>
                        </template>
                    </el-popover>
                    <li>
                        <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                        <span>723个会员专区课程免费学习</span>
                    </li>
                    <li>
                        <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                        <span>723个会员专区课程免费学习</span>
                    </li>
                    <li>
                        <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                        <span>723个会员专区课程免费学习</span>
                    </li>
                    <li>
                        <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                        <span>723个会员专区课程免费学习</span>
                    </li>
                    <li>
                        <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                        <span>723个会员专区课程免费学习</span>
                    </li>
                    <li>
                        <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                        <span>723个会员专区课程免费学习</span>
                    </li>
                    <li>
                        <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                        <span>723个会员专区课程免费学习</span>
                    </li>
                    <li>
                        <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                        <span>723个会员专区课程免费学习</span>
                    </li>
                    <li>
                        <img src="https://rs.dance365.com/teach_video_free.png" alt="" />
                        <span>723个会员专区课程免费学习</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.MY_member {
    width: 1029px;
    margin-top: 20px;
    background: #fff;
    height: 600px;
}

.member-vip {
    width: 960px;
    height: 100px;
    margin: 0 auto;
    /* background: rgb(255, 192, 243); */
}

.topmenber {
    width: 250px;
    height: 100px;
    margin: 0 auto;
    /* background: #ccc; */

}

.mycen {
    /* width: 142px; */
    height: 100px;
    box-sizing: border-box;

}

.mycen img {
    float: left;
    width: 100px;
    height: 100px;
}

.tightge {
    float: right;
}

.tightge h3 {
    cursor: pointer;
    text-align: left;
    padding-top: 15px;
    font-weight: normal;
    font-size: 18px;
}

.tightge p {
    margin-top: 14px;
    font-size: 12px;
    color: #f93684;
    text-align: left;
}

/* .topmenber img {
    width: 100px;
    height: 100px;
    float: left;
} */
.Open-membership {
    width: 900px;
    height: 20px;
}

.Open-membership p {
    text-align: center;
    margin-top: 13px;
    font-size: 16px;
    color: #666;
    margin-left: 66px;
}

.membership {
    width: 720px;
    height: 154px;
    margin: 21px auto 0;
    /* background: #f93684; */
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 124px;
    flex-wrap: wrap;
}


.quarterly {

    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 8px;
    width: 220px;
    height: 124px;
    border: 1px solid #b1b5c1;
    border-radius: 10px;
    text-align: center;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    justify-content: space-evenly;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.quarterly:hover {
    border: 2px solid #f93684;
    background-color: #f9ebf1;
    color: #f93684;
}
.quarterly span {
    margin: 0 10px ;
}
.bigSize {
	font-size: 30px;
}



/* 立即开通会员 */
.common_vip {
    width: 330px;
    height: 98px;
    /* background: cyan; */
    margin: 0 auto;
    position: relative;
}

.common_vip .btn {
    /* display: block;
    margin: 0 auto; */
    width: 330px;
    height: 56px;
    font-size: 16px;
    margin: 30px auto 12px;
    border-radius: 10px;
    background: linear-gradient(-56deg, #ff4683, #ff638f);
    color: #fff;
    cursor: pointer;
}

/* 开通协议 */
.Membership-Agreement {
    font-size: 14px;
    height: 30px;
    border-bottom: 1px solid #fff;
    box-shadow: #b1b5c1;


}

.Membership-Agreement p {
    text-align: center;
}


/* 专属权益 */
.Exclusive_rights {
    width: 960px;
    height: 366px;
    margin: 0 auto;
    /* background: burlywood; */
}

.Equity {
    color: #111;
    font-weight: 700;
    font-size: 20px;
    margin-top: 32px px;
}


.Exclusive_rights ul {
    display: flex;
    flex-wrap: wrap;
}

.Exclusive_rights ul li {
    width: 127px;
    height: 127px;
    border: 1px solid #eee;
    list-style: none;
    border-radius: 4px;
    margin-left: 30px;
    margin-bottom: 30px;
}

.Exclusive_rights ul li img {
    width: 46px;
    height: 42px;
    display: block;
    margin: 0 auto;
    margin-top: 14px;
}

.Exclusive_rights ul li span {
    display: block;
    height: 40px;
    text-align: center;
    line-height: 20px;
    margin: 14px 10px;
    font-size: 14px;
}

.popoImg {
    width: 46px;
    height: 42px;
    display: block;
    margin: 0 auto;
}

.popobtn {
    width: 150px;
    height: 40px;
    margin: 0 auto;
}
</style>